<template>
  <!-- 订单记录 -->
  <div class="manufacturer-order-record">
    <div class="search-view">
      <div class="search-input-box">
        <img class="search-icon" src="../assets/images/address.png" alt="">
        <input v-model="displayPartsNoSearch" @input="inputGetConsultantShopOrderList" class="search-input" type="text" placeholder="输入配件型号搜索" placeholder-class="search-input-placeholder">
      </div>
    </div>
    <div class="date-choice-view">
      <div class="date-choice-list">
        <div class="date-choice-item lusir-common_cursor" @click="hadnleClickDateQuick(item)" v-for="(item, index) in dateQuickChoiceList" :key="index" :class="curdateQuickChoiceValue == item.value ? 'active' : ''">
          {{item.label}}
        </div>
      </div>
      <div class="date-choice-picker">
        <img @click="openDateTimePicker" class="date-choice-picker-icon lusir-common_cursor" src="../assets/images/date.png" alt="">
      </div>
    </div>
    <div class="order-status-tab-list">
      <div class="order-status-tab-item lusir-common_cursor" @click="switchOrderStatus(0)" :class="orderStatus == 0 ? 'active' : ''">全部订单</div>
      <div class="order-status-tab-item lusir-common_cursor" @click="switchOrderStatus(1)" :class="orderStatus == 1 ? 'active' : ''">待发货</div>
    </div>

    <div class="order-list-view" v-if="orderList.length > 0" scroll-y @scrolltolower="bindscrolltolower">
      <div @click="jumpToOrderDetail(item)" class="order-item-view" v-for="item in orderList" :key="item.shopOrderId">
        <div class="order-date-view">{{item.createTime_text}}</div>
        <div class="order-numberInfo">
          <div class="order-number">订单号：{{item.shopOrderCode}}</div>
          <div class="order-status">{{item.orderStatus_text}}</div>
        </div>
        <div class="order-shopInfo">
          <div class="order-shop-list">
            <div class="order-shop-item" v-for="(wareItem, wareIndex) in item.wares" :key="wareIndex">
              <div class="shop-box">
                <div class="brandName">
                  {{wareItem.brandName}}
                </div>
                <div class="shopName">
                  {{wareItem.categoryName}}
                </div>
                <div class="partItemName lusir-common_cursor" @click.stop="handleClickPartItemDetail(wareItem)">
                  {{wareItem.displayPartsNo}}
                </div>
                <div class="seriesName" v-if="wareItem.seriesName">
                  {{wareItem.seriesName}}
                </div>
              </div>
              <div class="shop-num">{{wareItem.count}}</div>
            </div>
          </div>
          <div class="order-shop-total">
            <div class="shop-total-item" style="margin-right: .32rem;">共
              <span class="num">{{item.totalCount}}</span> 件商品 </div>
            <div class="shop-total-item">合计：
              <span class="num">¥{{item.payableAmount_text}}</span>
            </div>
          </div>
        </div>
        <div class="order-operate">
          <div class="order-cancel-btn lusir-common_cursor" v-if="item.canCancel" @click.stop="cancelOrder(item)">取消订单</div>
        </div>
      </div>
      <div class="noDataView" v-if="isNotMoreData">没有更多数据</div>
    </div>

    <comNoData v-else></comNoData>
    <!-- <div class="noOrderList" v-else>
      <img class="noOrderList-icon" src="../assets/images/nolist.png" alt="">
      <div class="noOrderList-text">暂无订单</div>
    </div> -->

    <van-overlay :show="isShowdateTimePickerDialog" @click.stop="isShowdateTimePickerDialog = false">
      <div class="dateTimePicker-view" v-if="isShowdateTimePickerDialog" @click.stop="comReturnFn">
        <!-- <Calendar :show="isShowdateTimePickerDialog" type="range" @close="onClose" @confirm="onConfirm" /> -->
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import comNoData from '@/components/com-noData';
// import Calendar from 'vant';
export default {
  data() {
    return {
      curdateQuickChoiceValue: 1,
      isShowdateTimePickerDialog: false,
      dateQuickChoiceList: [
        {
          label: "全部",
          value: 1
        },
        {
          label: "今天",
          value: 2
        },
        {
          label: "昨天",
          value: 3
        },
        {
          label: "本周",
          value: 4
        },
        {
          label: "本月",
          value: 5
        },
        {
          label: "本季",
          value: 6
        }
      ],
      // curDate: new Date().getTime(),
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1
      },
      startDate: "",
      endDate: "",
      displayPartsNoSearch: "", // 当前配件编码
      orderList: [], // 订单列表
      orderStatus: 0, // 订单状态
      isProgressWait: false, // 是否正在请求
      isNotMoreData: false, // 是否没有更多数据
    };
  },
  onUnload() {
    if (this.$options.data) {
      Object.assign(this.$data, this.$options.data());
    }
  },
  created() {
    this.getConsultantShopOrderList();
  },
  components: {
    comNoData,
    // Calendar
  },
  computed: {
    // 是否没有更多订单记录
    isOrderListNoMore() {
      return (
        this.pagination.pageSize * this.pagination.current >=
        this.pagination.total
      );
    },
    ...mapGetters([
      "cangpei_param_ccd",
    ])
  },
  methods: {
    // 搜索
    inputGetConsultantShopOrderList() {
      this.initPageList(); // 初始化页面list
    },
    // 取消订单
    cancelOrder(item) {
      this.$wx.toast("功能完善中，敬请期待");
    },
    // 报价详情
    handleClickPartItemDetail(item) {
      let partItemDetailDialog_initMode = "partItemInfo";
      let partItemDetailDialog_input = {
        partItemId: item.partItemId
      };
      let requestData = {
        partItemDetailDialog_initMode,
        partItemDetailDialog_input
      };
      this.$router.push({
        name: "partItemDetail",
        params: {
          requestData: JSON.stringify(requestData),
        },
      });
    },
    // 跳转到订单详情
    jumpToOrderDetail(item) {
      this.$router.push({
        path: `/consultantOrderDetail`,
        query: {
          id: item.shopOrderId,
        },
      });
    },
    // 页面滚动到最底部加载数据
    bindscrolltolower() {
      if (this.isProgressWait) {
        return;
      }
      if (this.isNotMoreData) {
        return;
      }
      this.isProgressWait = true;
      if (this.isOrderListNoMore) {
        this.isNotMoreData = true;
        this.$wx.toast("没有更多数据！");
        this.isProgressWait = false;
        return;
      }
      this.pagination.current += 1;
      this.getConsultantShopOrderList();
    },
    // 取得订单列表
    async getConsultantShopOrderList() {
      const res = await this.$imServive({
        url: "/IMConsultant/GetConsultantShopOrderList",
        data: {
          imConsultantCode: this.cangpei_param_ccd,
          status: this.orderStatus, // 全部 = 0, 待处理 = 1
          wareName: this.displayPartsNoSearch,
          startDate: this.startDate,
          endDate: this.endDate,
          pageIndex: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
      });

      // this.orderList = res.orders;
      this.pagination.total = res.totalCount;
      this.orderList = [...this.orderList, ...res.orders];

      this.orderList.forEach(item => {
        let totalCount = 0;
        let totalPrice = 0;
        item.wares.forEach(wareItem => {
          totalCount = wareItem.count + totalCount;
          totalPrice = wareItem.count * wareItem.price + totalPrice;
        })
        this.$set(item, 'totalCount', totalCount);
        this.$set(item, 'totalPrice', totalPrice.toFixed(2));
      })


      this.isProgressWait = false;
    },
    onConfirm(e) {
      this.startDate = this.formatDate(e.mp.detail[0]);
      this.endDate = this.formatDate(e.mp.detail[1]);
      this.curdateQuickChoiceValue = 0;
      this.isShowdateTimePickerDialog = false;
      this.initPageList(); // 初始化页面list

    },
    comReturnFn() {
      return;
    },
    formatDate(date) {
      let myyear = date.getFullYear();
      let mymonth = date.getMonth() + 1;
      let myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },
    onClose() {
      this.isShowdateTimePickerDialog = false;
    },
    openDateTimePicker() {
      this.isShowdateTimePickerDialog = true;
    },
    // 切换订单状态
    switchOrderStatus(status) {
      this.orderStatus = status;
      this.initPageList(); // 初始化页面list

    },
    // 切换固定日期范围
    hadnleClickDateQuick(item) {
      this.curdateQuickChoiceValue = item.value;

      if (this.curdateQuickChoiceValue == 1) {
        this.startDate = "";
        this.endDate = "";
      } else if (this.curdateQuickChoiceValue == 2) {
        this.startDate = this.$com_util.getLatelyTodayDate();
        this.endDate = this.$com_util.getLatelyTodayDate();
      } else if (this.curdateQuickChoiceValue == 3) {
        this.startDate = this.$com_util.getLatelyYesterdayDate();
        this.endDate = this.$com_util.getLatelyYesterdayDate();
      } else if (this.curdateQuickChoiceValue == 4) {
        this.startDate = this.$com_util.getWeekStartDateAndMonthEndDate()[0];
        this.endDate = this.$com_util.getWeekStartDateAndMonthEndDate()[1];
      } else if (this.curdateQuickChoiceValue == 5) {
        this.startDate = this.$com_util.getMonthStartDateAndMonthEndDate()[0];
        this.endDate = this.$com_util.getMonthStartDateAndMonthEndDate()[1];
      } else if (this.curdateQuickChoiceValue == 6) {
        this.startDate = this.$com_util.getQuarterStartDateAndMonthEndDate()[0];
        this.endDate = this.$com_util.getQuarterStartDateAndMonthEndDate()[1];
      }
      this.initPageList(); // 初始化页面list
    },
    // 初始化页面list
    initPageList() {
      this.pagination.current = 1; // 重置分页
      this.orderList = []; // 重置订单列表
      this.getConsultantShopOrderList(); // 获取订单列表
    }
  },
};
</script>

<style lang="stylus">
.manufacturer-order-record
  height 100vh
  overflow-y scroll
  border-top 1px solid #e0e0e0
  background-color #f6f7f8
  overflow hidden
  .search-view
    width 100%
    height 1.04rem
    background #ffffff
    padding 0.24rem 0.4rem 0
    box-sizing border-box
    .search-input-box
      width 100%
      height 0.8rem
      background #f6f6f6
      border-radius 0.12rem
      padding-left 0.32rem
      box-sizing border-box
      display flex
      align-items center
      .search-icon
        width 0.35rem
        height 0.35rem
      .search-input
        padding-left 0.24rem
        color #181818
        font-size 0.32rem
        background-color inherit
      .search-input-placeholder
        color #ccc
        font-size 0.32rem
  .date-choice-view
    width 100%
    height 1.04rem
    background #ffffff
    border-bottom 1px solid #cbd4e1
    display flex
    align-items center
    padding 0 0.4rem
    box-sizing border-box
    .date-choice-list
      display flex
      height 100%
      .date-choice-item
        font-size 0.36rem
        color #bcbcbc
        margin-right 0.73rem
        height 100%
        padding-bottom 0.2rem
        padding-top 0.2rem
        width 0.72rem
        display flex
        align-items center
        justify-content center
        box-sizing border-box
      .date-choice-item:last-child
        margin-right 0
      .date-choice-item.active
        font-size 0.36rem
        font-weight 600
        color #e74c3c
        border-bottom 0.04rem solid #e74c3c
    .date-choice-picker
      margin-left auto
      padding-left 0.4rem
      border-left 1px solid #e8e8e8
      .date-choice-picker-icon
        width 0.4rem
        height 0.4rem
  .order-status-tab-list
    height 1.22rem
    width 100%
    box-sizing border-box
    padding 0.36rem 0.32rem 0.33rem
    display flex
    align-items center
    background #f5f5f5
    .order-status-tab-item
      width 1.84rem
      height 0.53rem
      font-size 0.32rem
      color #333333
      display flex
      justify-content center
      align-items center
    .order-status-tab-item.active
      font-size 0.32rem
      font-weight 550
      color #e74c3c
  .order-list-view
    height calc(100vh - 3.31rem)
    overflow auto
    width 100%
    .noDataView
      width 100%
      height 0.8rem
      display flex
      justify-content center
      align-items center
      font-size 0.36rem
      color #a0b0c5
    .order-item-view
      width 100%
      background-color #fff
    .order-date-view
      background #f5f5f5
      width 100%
      height 0.88rem
      display flex
      justify-content center
      align-items center
      border-top 1px solid #cbd4e1
      border-bottom 1px solid #cbd4e1
      font-size 0.32rem
      color rgba(0, 0, 0, 0.24)
    .order-numberInfo
      display flex
      justify-content space-between
      align-items center
      background-color #fff
      height 0.8rem
      width 100%
      box-sizing border-box
      padding 0 0.4rem
      .order-number
        font-size 0.28rem
        color #bcbcbc
      .order-status
        font-size 0.28rem
        color #e74c3c
    .order-shopInfo
      width 100%
      padding 0 0.4rem
      box-sizing border-box
      .order-shop-list
        background-color #f8f8f8
        padding 0.16rem 0.24rem
      .order-shop-item
        width 100%
        box-sizing border-box
        display flex
        align-items center
        justify-content space-between
        height 0.64rem
        .shop-box
          display flex
          align-items center
          .brandName
            font-size 0.32rem
            color #5b5b5b
          .shopName
            font-size 0.32rem
            color #5b5b5b
            margin-left 0.12rem
          .partItemName
            font-size 0.32rem
            color #377de8
            margin-left 0.12rem
          .seriesName
            margin-left 0.12rem
            font-size 0.28rem
            line-height 0.4rem
            background #fab220
            margin-left 0.16rem
            padding 1px 0.13rem
            border-radius 0.16rem 0.04rem
            color #ffffff
        .shop-num
          font-size 0.32rem
          color #bcbcbc
      .order-shop-total
        height 0.8rem
        width 100%
        display flex
        align-items center
        justify-content flex-end
        background-color #f8f8f8
        padding-right 0.24rem
        box-sizing border-box
        .shop-total-item
          font-size 0.32rem
          color #5b5b5b
          .num
            font-size 0.36rem
            font-weight 600
            color #e74c3c
    .order-operate
      display flex
      align-items center
      justify-content flex-end
      padding 0 0.4rem
      height 1.28rem
      box-sizing border-box
      .order-cancel-btn
        width 2rem
        height 0.8rem
        background #ffffff
        border 1px solid #d8d8d8
        border-radius 0.08rem
        font-size 0.32rem
        color #8e8e8e
        display flex
        align-items center
        justify-content center
  .lusir-common-footer-close-view
    width 100%
    height 1.33rem
    position fixed
    left 0
    bottom 0
    display flex
    align-items center
    justify-content center
    background-color #fff
    z-index 1
    border-top 1px solid #cbd4e1
    box-sizing border-box
    .close-btn
      width 2.24rem
      height 0.8rem
      background #ffffff
      border 1px solid #e74c3c
      border-radius 39px
      font-size 0.4rem
      color #e74c3c
      display flex
      align-items center
      justify-content center
</style>

